<template>
	<view class="page">
		<topVue :title="i18n.n6" :isRecord="true" path="./record"></topVue>
		<view class="banner margin20 flex align-center padding-row30">
			<image src="../../static/coins/usdt.png" style="width: 86rpx; height: 86rpx;"></image>
			<view class="flex-column flex-1 flex-between" style="height: 86rpx; padding-left: 20rpx;">
				<text style="color: rgba(255,255,255,0.6); line-height: 1;">{{i18n.p1}}</text>
				<view class="using">{{ totalAmount | number(2)}}</view>
			</view>
		</view>

		<view class="btnVue margin60 flex-between">
			<view class="btn" @click="$tools.route('./charge')"></view>
			<view class="btn" @click="$tools.route('./withdraw')"></view>
		</view>

		<view class="titleVue flex align-center">
			<view class="dot"></view>
			<view class="title">{{i18n.p2}}</view>
		</view>

		<view class="item margin30 flex-between align-center padding-row30" v-for="(item, index) in list" :key="index">
			<view class="flex align-center">
				<image src="../../static/coins/cat.png" style="width: 86rpx; height: 86rpx;" v-if="item.currencyStr=='AICAT'"></image>
				<image src="../../static/coins/usdt.png" style="width: 86rpx; height: 86rpx;" v-if="item.currencyStr=='USDT'"></image>
				<view class="name">{{item.currencyStr}}</view>
			</view>
			<view class="flex-column align-end">
				<text style="font-weight: 600; line-height: 1; font-size: 32rpx;">{{item.balance}}</text>
				<u-gap height="20"></u-gap>
				<text style="color: rgba(255,255,255,0.6); line-height: 1;">≈${{item.totalAmount}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				totalAmount: 0,
			};
		},
		async onShow() {
			await this.getList()
		},
		computed:{
			i18n() {
				return this.$t("message");
			}
		},
		methods: {
			async getList(){
				const res = await this.$request("/front/user/userWallet")
				if(res.code===0) {
					this.list = res.data
					console.log(this.list)
					this.totalAmount = 0
					for(let i=0; i<this.list.length;i++) {
						this.totalAmount = this.totalAmount + this.list[i].totalAmount
					}
				}
			}
		}
	}
</script>

<style lang="less">
	.banner {
		width: 670rpx;
		height: 326rpx;
		background: url("../../static/wallet/banner.png") no-repeat;
		background-size: 100% 100%;
		.using {
			font-weight: 600;
			font-size: 46rpx;
			color: #45F882;
			line-height: 1;
		}
	}

	.btnVue {
		width: 670rpx;
		height: 90rpx;
		.btn {
			width: 325rpx;
			height: 90rpx;
		}
		.btn:nth-child(1) {
			background: url('../../static/wallet/charge.png') no-repeat;
			background-size: 100% 100%;
		}
		.btn:nth-child(2) {
			background: url('../../static/wallet/withdraw.png') no-repeat;
			background-size: 100% 100%;
		}
	}

	.titleVue {
		width: 100%;
		padding: 80rpx 0 0 40rpx;
		.dot {
			width: 4rpx;
			height: 30rpx;
			background: #45F882;
		}
		.title {
			font-weight: 600;
			padding-left: 20rpx;
			line-height: 1;
			font-size: 32rpx;
		}
	}

	.item {
		width: 670rpx;
		height: 156rpx;
		background: rgba(255,255,255,0.05);
		border-radius: 16rpx;
		.name {
			font-size: 32rpx;
			padding-left: 20rpx;
			font-weight: 600;
		}
	}
</style>
